<template>
  <div class="content-container my-container">
  	<m-Head></m-Head>
    <div class="map-container">
      <mapComponent :id="mapId"></mapComponent>
      <div class="map-control">
        <div><img :src="compassPng" style="width:2.2rem;height:2.2rem;display: block;
    margin-left: 0;"></img></div>
        <div class="eqCenter"><button class="eq-center" v-on:click="encbmap.setCenterView()"></button></div> 
      </div>
    </div>
    
  </div>
</template>

<script>
import mHead from '@/components/head'
import mapComponent from '@/components/map'
import axios from '@/assets/api/axios'
import fault_zone from '@/assets/fault_zone.json'
import Baidumap from '@/assets/api/bmap'
import compassPng from '@/assets/mapimg/compassicon.png'
import '@/assets/basemap.css'
export default {
  name: 'nearfz',
  data: function () {
  	return {
  		//由于vueg的嵌套路由默认不启动转场动画，需要在其匹配组件中设置为启用
  		vuegConfig:{
  			disable:false
  		},
      encbmap:null,
      compassPng:compassPng,
      mapId:"nearfz"
  	}
  },
  created:function(){
    //震中信息
      let setting = {
        method: 'POST',
        url: '/Earthdata/getData'
      };
      let data={
        handel:'epic'
      } 
      axios((res) => {
        if (res.stutas === 200) {
          let data = res.data;
          if(data[0]){
            this.eqCenter=data[0];
            this.mapInit();
          }else{
            console.log("请求不到数据")
          }
        }
      }, {setting, data})
  },
  mounted(){
    
  },
  methods:{
    mapInit(){
      this.encbmap=new Baidumap(this.mapId,this.eqCenter);
      this.encbmap.setFaultZone(fault_zone);
    }
  },
  components: {
    mHead,
    mapComponent
  }
}
</script>

<style>
</style>